<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.example.demo.grbkxt.model.*" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html>
<head>
    <title>${blog.title}</title>
    <%@ include file="/WEB-INF/views/common/header.jsp" %>
    <style>
        .blog-content {
            margin-bottom: 30px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .comment-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .comment-form textarea {
            width: 100%;
            min-height: 100px;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }
        .comment-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .comment-meta {
            color: #666;
            font-size: 0.9em;
            margin-top: 10px;
        }
        .back-btn {
            margin: 20px 0;
        }
        .back-btn a {
            display: inline-block;
            padding: 8px 16px;
            background-color: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .back-btn a:hover {
            background-color: #5a6268;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="back-btn">
            <a href="javascript:history.back()">返回上一页</a>
        </div>
        <div class="blog-content">
            <h1>${blog.title}</h1>
            <div class="meta">
                <span>分类：${blog.category}</span>
                <span>发布时间：${blog.createTime}</span>
            </div>
            <div class="content">
                ${blog.content}
            </div>
        </div>

        <div class="comment-section">
            <h3>评论区</h3>
            <% if(session.getAttribute("user") != null) { %>
                <form action="${pageContext.request.contextPath}/comment/add" method="post" class="comment-form">
                    <input type="hidden" name="blogId" value="${blog.id}">
                    <textarea name="content" required placeholder="写下你的评论..."></textarea>
                    <button type="submit" class="btn btn-primary">发表评论</button>
                </form>
            <% } else { %>
                <p>请<a href="${pageContext.request.contextPath}/login.jsp">登录</a>后发表评论</p>
            <% } %>

            <div class="comments-list">
                <%
                List<Comment> comments = (List<Comment>)request.getAttribute("comments");
                if(comments != null && !comments.isEmpty()) {
                    for(Comment comment : comments) {
                %>
                    <div class="comment-item">
                        <div class="comment-content">
                            <%= comment.getContent() %>
                        </div>
                        <div class="comment-meta">
                            <span>评论者：<%= comment.getUsername() %></span>
                            <span>时间：<%= comment.getCreatedAt() %></span>
                            <% 
                            User currentUser = (User)session.getAttribute("user");
                            // 只有评论作者本人或管理员才能看到删除按钮
                            if(currentUser != null && 
                               (currentUser.getId().equals(comment.getUserId()) || currentUser.isAdmin())) { 
                            %>
                                <button onclick="deleteComment('<%= comment.getId() %>')" class="btn btn-sm btn-danger">删除</button>
                            <% } %>
                        </div>
                    </div>
                <% 
                    }
                } else { 
                %>
                    <p>暂无评论</p>
                <% } %>
            </div>
        </div>
    </div>

    <script>
    function deleteComment(commentId) {
        if(confirm('确定要删除这条评论吗？')) {
            fetch('${pageContext.request.contextPath}/comment/delete?id=' + commentId, {
                method: 'POST'
            }).then(response => {
                if(response.ok) {
                    window.location.reload();
                }
            });
        }
    }
    </script>
</body>
</html>

